/*
 * http://fxexperience.com/2011/12/styling-fx-buttons-with-css/
 * http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html
 * https://code.google.com/p/javafx-demos/source/browse/trunk/javafx-demos/src/main/resources/styles/caspian/caspian_2.1_GA.css?r=17
 * https://bitbucket.org/openjfxmirrors/openjfx-8-graphics-rt/src/3408eed98c2c/javafx-ui-controls/src/javafx/scene/control?at=default
 */

.filter-popup-menu
{
	-fx-skin: "org.google.jhsheets.filtered.tablecolumn.editor.FilterMenuPopupSkin";
}

/* Get rid of the border around the list-view */
.filter-popup-menu .content .list-view
{
	-fx-background-color: transparent;
}

/* Get rid of cell coloring */
.filter-popup-menu .content .list-view .list-cell:even
, .filter-popup-menu .content .list-view .list-cell:odd
{
	-fx-background-color: transparent;
}

/* Color list cell background hover */
.filter-popup-menu .content .list-view .list-cell:filled:hover
{
    -fx-background: -fx-accent;
    -fx-background-color: -fx-selection-bar;
    -fx-background-insets: 0 0 0 0;
}

.filter-popup-menu .content .list-view .list-cell:filled .check-box
{
	-fx-text-fill: black;
}

/* Color list cell foreground on hover */
.filter-popup-menu .content .list-view .list-cell:filled:hover .check-box
{
	-fx-text-fill: white;
}

/* Pad the content area (which contains filter-popup-menu */
.filter-popup-menu .content 
{
	-fx-padding: 4.0 4.0 0.0 4.0;
}

/* Put some space between the buttons and the content area */
.filter-popup-menu .content .bottom
{
	-fx-padding: 6 0 0 0;
}

/* Make it easier to distinguish enabled textfields from disabled ones */
.filter-popup-menu .content .text-field
{
	-fx-background-color: derive(-fx-shadow-highlight-color,-15%), derive(-fx-text-box-border,-30%), -fx-control-inner-background;
}
.filter-popup-menu .content .text-field:focused
{
	-fx-background-color: -fx-focus-color, -fx-text-box-border, -fx-control-inner-background, transparent;
}
.filter-popup-menu .content .text-field:disabled
{
	-fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, derive(-fx-control-inner-background,-1%);
}

.filter-popup-menu .content .bottom .separator
{
	-fx-padding: 0 0 5 0;
}

.filter-popup-menu .content .bottom .separator .line
{
	-fx-border-style: solid; 
    -fx-border-color: derive(-fx-background, -20%) -fx-background derive(-fx-background, 20%) -fx-background;
}

.filter-popup-menu .content .top
{
	-fx-padding: 4.0 -2.0 4.0 -2.0
}

.filter-popup-menu .content .top .label
{
	-fx-background-color: linear-gradient(derive(-fx-control-inner-background, -2%), derive(-fx-control-inner-background, -9%));
    -fx-background-radius: 5,5,5,5;
    -fx-text-fill: black;
    -fx-font-weight: bold;
    -fx-text-alignment: center;
    -fx-padding: 0 2 0 2;
}

.filter-popup-menu .content .top .separator
{
	-fx-padding: 0.0 2.0 0.0 2.0;
}

.filter-popup-menu .content .top .separator .line
{
	-fx-border-style: solid; 
    -fx-border-color: derive(-fx-background, -20%) -fx-background derive(-fx-background, 20%) -fx-background;
}





.datepicker-invalid
{
    -fx-border-color: red;
}

.datepicker-valid
{
    -fx-border-color: null;
}

/* The main calendar pane */
.calendar {
}

.calendar-editor {
	-fx-alignment: baseline-center;
}

.calendar-editor .calendar-popup-button {
    -fx-background-image: url('calendar-icon.png');
    -fx-background-repeat: no-repeat;   
    -fx-background-position: center center !important;
    -fx-background-color: transparent !important;
    -fx-content-display: graphic-only !important;
    -fx-scale-y: 1.2;
    -fx-scale-x: 1.2;
}

.calendar-editor .calendar-popup-button:hover {
    -fx-background-image: url('calendar-active-icon.png');
}

/* The calendar header, which contains the navigation elements. */
.calendar-header
{
    -fx-background-color: linear-gradient(to bottom, derive(-fx-base,-70%), derive(-fx-base,-90%));
    -fx-padding: 0.5em;
   /* -fx-background-radius: 10;*/
}

/* The calendar footer, which contains the today button. It is only visible when the today button is shown */
.calendar-footer
{
    -fx-background-color: linear-gradient(to top, derive(-fx-base,-70%), derive(-fx-base,-90%));
    -fx-padding: 0.2em;
}

/* The 3 different panes, which show the month, the year, and the decades */
.calendar-month-view, .calendar-year-view, .calendar-decades-view
{
    -fx-background-color: linear-gradient(to bottom, derive(-fx-base,80%), derive(-fx-base,40%));
    -fx-padding: 0;
}

/* The usual button which either display the day of the current month, or the month in the year view, or the year in the decades view */
.calendar-cell-current-month, .calendar-year-button, .calendar-month-button {
    -fx-background-color: null;
    -fx-background-radius: 0;
    -fx-background-insets: 0, 0, 0, 0;
    -fx-cursor: hand;
    -fx-padding: 0.7em;
    -fx-font-weight: bold;
    -fx-background-radius: 8;
}

/* The hover state of the buttons */
.calendar-cell-current-month:hover, .calendar-year-button:hover, .calendar-month-button:hover {
    -fx-background-color: -fx-cell-hover-color;
}

/* The day buttons for the previous and next month. */
.calendar-cell-other-month {
    -fx-background-color: null;
    -fx-background-radius: 0;
    -fx-background-insets: 0, 0, 0, 0;
    -fx-opacity: 0.7;
    -fx-cursor: hand;
    -fx-padding: 0.7em;
    -fx-background-radius: 8;
}

/* The hover state of this button. */
.calendar-cell-other-month:hover {
    -fx-background-color: -fx-cell-hover-color;
}

/* The button which shows the current day. */
.calendar-cell-today {
     -fx-background-color: -fx-accent;
}

/* The buttons in the header and the footer */
.calendar-navigation-button, .calendar-navigation-title, .calendar-today-button {
    -fx-background-color: null;
    -fx-cursor: hand;
    -fx-text-fill: white;
}

/* don't make the title button transparent, when it is disabled in the decades view */
.calendar-navigation-title:disabled {
    -fx-opacity: 1;
}

/* The arrow for navigation. SVG is used for it. */
.calendar-navigation-arrow {
    /*padding determines the size of the arrow; This should match the design size in the SVG */
    -fx-padding: 4 3.5 4 3.5;
    -fx-padding: 0.333333em 0.333333em 0.333333em 0.333333em; /* 2 3.5 2 3.5 */
    -fx-shape: "M 100 100 L 300 100 L 200 300 z";
    -fx-background-color: #ffffff;
}

/* The cell which contain the week day names */
.calendar-weekdays {
    -fx-background-color: -fx-body-color;
    -fx-padding: 3px;
}

.calendar-week-number {
    -fx-font-size: 0.8em;
    -fx-padding: 4px;
}
